<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>地图</title>
    <style>
        * {
            padding: 0px;
            margin: 0px;
        }

        .bg {
            width: 100%;
            height: 770px;
            position: relative;
        }

        .bg .content {
            width: 748px;
            height: 618px;
            position: absolute;
            left: 410px;
            top: 60px;
        }

        .bg .content div {
            background: #009FD9;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            position: relative;
        }

        .bg .content p {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            animation: myfirst 1.5s infinite;
            box-shadow: 0px 0px 1px #009FD9;
        }

        .bg .content span {
            position: absolute;
            display: block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            animation: myfirst 1.5s infinite;
            box-shadow: 0px 0px 1px #009FD9;
            animation-delay: 0.5s;
        }

        .bg .content .one {
            position: absolute;
            left: 600px;
            top: 100px;
        }

        .bg .content .two {
            position: absolute;
            left: 550px;
            top: 150px;
        }

        .bg .content .three {
            position: absolute;
            left: 500px;
            top: 200px;
        }

        .bg .content .four {
            position: absolute;
            left: 450px;
            top: 250px;
        }

        .bg .content .five {
            position: absolute;
            left: 400px;
            top: 300px;
        }

        @keyframes myfirst {
            20% {
                transform: scale(2);
            }
            40% {
                transform: scale(3);
            }
            60% {
                transform: scale(4);
            }
            80% {
                transform: scale(5);
            }
            100% {
                transform: scale(6);
            }
        }
    </style>
</head>
<body>
<div class="bg">
    <div class="content">
        <div class="one"><p></p><span></span></div>
        <div class="two"><p></p><span></span></div>
        <div class="three"><p></p><span></span></div>
        <div class="four"><p></p><span></span></div>
        <div class="five"><p></p><span></span></div>
    </div>
</div>
</body>
</html>
